{% extends "layout.html" %}

{% block title %}Création d'une facture ponctuelle{% endblock %}

{% block content %}
    <h3>Création d'une facture ponctuelle</h3>
    <form method="post" class="form-horizontal" action="creation-facture-ponctuelle{% if not facture is null %}?id-facture={{ facture.id }}{% endif %}">   
        <div class="row">
            <div class='span11' id="ajout-offres">
                <label class="checkbox">
                    <input id="is-avoir" type="checkbox" value="" name="is-avoir"{% if not facture is null %}{% if facture.is_avoir %} checked{% endif %}{% endif %}>
                    Créer un avoir
                </label>
                <label id="billing-mode">
                    Type de paiement : 
                    <select name="mode-paiement">
                        <option value="prv">Prélevement</option>
                        <option value="vrm">Virement</option>
                        <option value="chq">Chèque</option>
                        <option value="mdt">Mandat</option>
                    </select>
                </label>
                <hr/>
                {% set i = 1 %}
                    {% if not facture is null %}
                        {% for ligne in facture.lignes %}
                            <div id="fact-{{ i }}">
                                <div class="control-group span5">
                                    <select name="fact[{{ i }}][offre][label]" class="span3 offre-input">
                                        <option>Sélectionnez une offre ...</option>
                                        {% for offre in offresLabels %}
                                            <option{% if offre == ligne.libelle %} selected{% endif %}>{{ offre }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" name="fact[{{ i }}][offre][id-produit]" value="{{ ligne.id_terminal }}" />
                                    <input type="number" class="input-small quantite-offre" placeholder="Quantité ..." name="fact[{{ i }}][quantite]" required value="{{ ligne.quantite }}">
                                </div>
                                <div class="control-group span2">
                                    <label for="fact[{{ i }}][prixunitaire]" class="control-label">Prix unitaire</label>
                                    <div class="controls prix">
                                        <input class="input-small" name="fact[{{ i }}][prixunitaire]" type="number" placeholder="Prix ..." disabled value="{{ ligne.prix_0 }}">
                                    </div>
                                </div>
                                <div class="control-group span2">
                                    <label for="fact[{{ i }}][prixtotal]" class="control-label">Total</label>
                                    <div class="controls prix">
                                        <input class="input-small" name="fact[{{ i }}][prixtotal]" type="number" placeholder="Total ..." disabled value="{{ ligne.prix }}">
                                    </div>
                                </div>
                                <button id="{{ i }}" class="btn-small btn-danger pull-right delete-offre" type="button"><i class="icon-trash"></i></button>
                            </div>
                            {% set i = i+1 %}
                                {% endfor %}
                                    {% else %}
                                        <div id="fact-{{ i }}">
                                            <div class="control-group span5">
                                                <select name="fact[{{ i }}][offre][label]" class="span3 offre-input">
                                                    <option>Sélectionnez une offre ...</option>
                                                    {% for offre in ob_offres %}
                                                        <option value="{{ offre.id }}">{{ offre.libelle }}</option>
                                                    {% endfor %}
                                                </select>
                                                <input type="hidden" name="fact[{{ i }}][offre][id-produit]" value="" />
                                                <input type="number" class="input-small quantite-offre" placeholder="Quantité ..." name="fact[{{ i }}][quantite]" required value="">
                                            </div>
                                            <div class="control-group span2">
                                                <label for="fact[{{ i }}][prixunitaire]" class="control-label">Prix unitaire</label>
                                                <div class="controls prix">
                                                    <input class="input-small" name="fact[{{ i }}][prixunitaire]" type="number" placeholder="Prix ..." disabled>
                                                </div>
                                            </div>
                                            <div class="control-group span2">
                                                <label for="fact[{{ i }}][prixtotal]" class="control-label">Total</label>
                                                <div class="controls prix">
                                                    <input class="input-small" name="fact[{{ i }}][prixtotal]" type="number" placeholder="Total ..." disabled>
                                                </div>
                                            </div>
                                            <button id="{{ i }}" class="btn-small btn-danger pull-right delete-offre" type="button"><i class="icon-trash"></i></button>
                                        </div>
                                        {% endif %}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="span11">
                                            <button id="add-offre" class="btn btn-info pull-right" type="button">Ajouter une offre</button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class='span11'>
                                            <hr/>
                                            <input type="hidden" name="id-client" value="{{ client.id }}" />
                                            <button type="submit" class="btn btn-primary" name="action" value="validate"><i class="icon-ok icon-white"></i> Valider la facture</button>
                                            <a href="liste-client" class="btn btn-info"><i class="icon-chevron-left icon-white"></i> Annuler</a>
                                        </div>
                                    </div>
                                </form>
                                <script type="text/javascript">
                                    var iFact = {{ i }};
                                            var offres = {{ offres | raw }};
                                            //ajout offre
                                            $('#add-offre').click(function() {
                                        iFact++;
                                        $('#ajout-offres').append('<div id="fact-' + iFact + '">\
                    <div class="control-group span5">\
                        <select name="fact[' + iFact + '][offre][label]" class="span3 offre-input"><option>Sélectionnez une offre ...</option>{% for offre in ob_offres %}<option value="{{ offre.id }}">{{ offre.libelle }}</option>{% endfor %}\
                        </select>\
                        <input type="hidden" name="fact[' + iFact + '][offre][id-produit]" id="offre-code-' + iFact + '" value="" />\
                        <input type="number" class="input-small quantite-offre" placeholder="Quantité ..." name="fact[' + iFact + '][quantite]" required>\
                    </div>\
                    <div class="control-group span2">\
                        <label for="fact[' + iFact + '][prixunitaire]" class="control-label">Prix unitaire</label>\
                        <div class="controls prix">\
                            <input class="input-small" name="fact[' + iFact + '][prixunitaire]" type="number" placeholder="Prix ..." disabled>\
                        </div>\
                    </div>\
                    <div class="control-group span2">\
                        <label for="fact[' + iFact + '][prixtotal]" class="control-label">Total</label>\
                        <div class="controls prix">\
                            <input class="input-small" name="fact[' + iFact + '][prixtotal]" type="number" placeholder="Total ..." disabled>\
                        </div>\
                    </div>\
                    <button id="' + iFact + '" class="btn-small btn-danger pull-right delete-offre" type="button"><i class="icon-trash"></i></button>\
                </div>');
                                    })
                                    //supression offre
                                    $('#ajout-offres').delegate('button.delete-offre', 'click', function() {
                                        $('#fact-' + $(this).attr('id')).remove();
                                    });
                                    //ajout du code offre correspondant au libelle
                                    $('#ajout-offres').delegate('select.offre-input', 'change', function(evt) {
                                        $('input[name="' + evt.target.name.replace('[label]', '[id-produit]') + '"]').val(offres[evt.target.value]['id']);
                                    });

                                    //affichage du prix
                                    $('#ajout-offres').delegate('input.quantite-offre', 'change', function(evt) {
                                        var quantite = evt.target.value;
                                        var prix = offres[$('select[name="' + evt.target.name.replace('[quantite]', '[offre][label]') + '"]').val()]['prix_0'];
                                        $('input[name="' + evt.target.name.replace('[quantite]', '[prixtotal]') + '"]').val(quantite * prix);
                                        $('input[name="' + evt.target.name.replace('[quantite]', '[prixunitaire]') + '"]').val(prix);
                                    });

                                    $('#is-avoir').click(function(evt) {
                                        $('#billing-mode').toggle();
                                    });

                                    $('document').ready(function() {
                                        if ($('#is-avoir').is(':checked')) {
                                            $('#billing-mode').hide();
                                        }
                                    });

                                </script>
                                {% endblock %}
